<template>
<div>
<Header></Header>
    <div class="swiper-container swiper_banner">
        <div class="swiper-wrapper">
            <div v-for="banner in bannerList" class="swiper-slide" :style="{backgroundImage:'url('+(sftpPathPrefix+banner.image)+')'}"></div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <div class="about_box index_box_1">
        <div class="con left">
            <p class="title">关于智富·<span style="color: #999;">About</span></p>
            <p class="nr">广州智富网络信息服务有限公司成立于2018年1月，是香港E-Vacations旗下的全资子公司。秉承“集智慧共创天下，聚财富共赢未来”的公司创办理念，致力成为客户的终身“健康”顾问。</p>
            <div class="jk_con">
                <div class="t_wz"><span class="name">智富四大健康版块</span><router-link to="/about" class="more_btn">查看详情</router-link></div>
                <ul class="jk_ul">
                    <li>
                        <p class="icon"><img src="lib/images/ic_2.jpg" alt=""></p>
                        <p class="wz">心理健康</p>
                    </li>
                    <li>
                        <p class="icon"><img src="lib/images/ic_3.jpg" alt=""></p>
                        <p class="wz">财富健康</p>
                    </li>
                    <li>
                        <p class="icon"><img src="lib/images/ic_4.jpg" alt=""></p>
                        <p class="wz">外表健康</p>
                    </li>
                    <li>
                        <p class="icon"><img src="lib/images/ic_5.jpg" alt=""></p>
                        <p class="wz">身体健康</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="about_pt right"><img src="lib/images/about_pt.jpg" alt=""></div>
        <div class="clear"></div>
    </div>
    <div class="active_box">
        <div class="index_box_1">
            <div class="title">热门活动与游记</div>
            <ul class="active_ul">
                <li v-for="active in activeList">
                    <router-link :to="'/active/detail/' + active.id">
                        <p class="pt"><img width="246" height="164" :src="sftpPathPrefix + active.image" alt=""><span class="label_wz">活动</span></p>
                        <p class="name">{{active.title}}</p>
                        <p class="wz">活动时间：{{active.weightDate}}</p>
                    </router-link>
                </li>
                <li v-for="active in youjiList">
                    <router-link :to="'/active/detail/' + active.id">
                        <p class="pt"><img width="246" height="164" :src="sftpPathPrefix + active.image" alt=""><span class="label_wz">游记</span></p>
                        <p class="name">{{active.title}}</p>
                        <p v-if="!active.hits" class="wz">活动时间：{{active.weightDate}}</p>
                        <p v-if="active.hits" class="wz"><span class="ic_eye">{{active.hits}}</span>看过 | {{active.weightDate}}</p>
                    </router-link>
                </li>
            </ul>
            <div class="cz tac"><router-link to="/active">查看全部</router-link></div>
        </div>
    </div>
    <div class="travel_box index_box_1">
        <div class="common_title">
            <p class="t_wz"><span class="name">旅行定制</span>·TRAVEL CUSTOMIZATION<router-link to="/travel/custom" class="more_btn">查看全部</router-link></p>
            <p class="wz">说走就走的旅行，其实并不靠谱；只有精心设计有计划的旅行，才能玩出彩；<br />我们为您提供私密小团队旅行，与众不同的高端定制旅行线路，带给您最贴近当地风俗与文化的旅行体验。</p>
        </div>
        <ul class="travel_ul common_code_pop">
            <li v-for="tour in tourList">
                <a href="javascript:void(0);">
                    <div class="pt">
                        <div class="wx_con">
                            <p class="code_pt" :link="weixinPrefix+'#/travel/detail/'+tour.id"><!--<img src="lib/images/code_1.jpg" alt="">--></p>
                            <p class="wx_wz">微信扫码在线下单</p>
                        </div>
                        <img width="296" height="154" :src="sftpPathPrefix + getZhutu(tour.zhutu)" alt="">
                    </div>
                    <p class="name">{{tour.title}}</p>
                    <p class="wz">{{tour.subtitle}}</p>
                    <p class="price"><span class="num">{{tour.zuidirenjunJiner}}</span>元起</p>
                </a>
            </li>
        </ul>
    </div>
    <div class="vip_box">
        <div class="index_box_1">
            <p class="t_wz">VIP五大特权  尽享尊贵体验</p>
            <ul class="vip_con_ul">
                <li>
                    <p class="icon"><img src="lib/images/ic_vip_1.png" alt=""></p>
                    <p class="wz_1">全球酒店低价住</p>
                    <p class="wz_2">全球五星酒店低至2-3折入住花标准间的价格，享受豪华套房的服务</p>
                </li>
                <li>
                    <p class="icon"><img src="lib/images/ic_vip_2.png" alt=""></p>
                    <p class="wz_1">1对1专业旅行顾问</p>
                    <p class="wz_2">专业旅行顾问一对一免费为你定制行程，出行费用降两级，旅行体验升三级</p>
                </li>
                <li>
                    <p class="icon"><img src="lib/images/ic_vip_3.png" alt=""></p>
                    <p class="wz_1">全球导游加司机</p>
                    <p class="wz_2">全球专业导游对接，不仅可全程带玩，还是你的专属司机，省心省力</p>
                </li>
                <li>
                    <p class="icon"><img src="lib/images/ic_vip_4.png" alt=""></p>
                    <p class="wz_1">超长年限25年</p>
                    <p class="wz_2">用平时5年旅游费用，享受25年超长服务体验</p>
                </li>
                <li>
                    <p class="icon"><img src="lib/images/ic_vip_5.png" alt=""></p>
                    <p class="wz_1">浪漫体验定制</p>
                    <p class="wz_2">想来一场浪漫旅行，不仅有专业顾问出谋划策，还提供现场布置</p>
                </li>
            </ul>
            <div class="cz tac"><router-link to="/vip">查看全部</router-link></div>
        </div>
    </div>
    <div class="index_box_1">
        <div class="hotel_list">
            <div class="common_title">
                <p class="t_wz"><span class="name">酒店租赁</span>·HOTEL LEASE<router-link to="/hotel/list" class="more_btn">查看全部</router-link></p>
                <p class="wz">开心玩，轻松赚：免费住泰国度假胜地度假村， 投资年回报高达9%</p>
            </div>
            <ul class="hotel_ul common_code_pop">
                <li v-for="hotel in hotelList">
                    <a href="javascript:void(0);">
                        <div class="pt">
                            <div class="wx_con">
                                <p class="code_pt" :link="weixinPrefix+'#/hotelrent/detail/'+hotel.id"><!--<img src="lib/images/code_2.jpg" alt="">--></p>
                                <p class="wx_wz">微信扫码在线下单</p>
                            </div>
                            <img width="508" :src="sftpPathPrefix + hotel.photo" alt="">
                        </div>
                        <p class="wz_1"><span class="name">{{hotel.title}}</span><span class="label_wz">{{hotel.year}}</span></p>
                        <p class="wz_2">{{hotel.remark}}</p>
                    </a>
                </li>
            </ul>
        </div>
        <div class="property_box">
            <div class="common_title">
                <p class="t_wz"><span class="name">海外房产</span>·OVERSEAS REAL ESTATE<router-link to="/hotel/property" class="more_btn">查看全部</router-link></p>
            </div>
            <ul class="hotel_ul">
            	<li v-for="fangchan in fangchanList">
                    <router-link :to="'/hotel/detail/' + fangchan.id"><img width="508" :src="sftpPathPrefix + fangchan.image" alt=""></router-link>
                </li>
            </ul>
        </div>
    </div>
    <Footer></Footer>
</div>
</template>
<script>
import common from "../utils/common";
import Header from "../components/Header.vue";
import Footer from "../components/Footer.vue";
export default {
  components: {
    Header,Footer
  },
  mounted: function() {
    this.loadData();
  },
  methods: {
        loadData: function(){
            var self = this;
            var url = common.getApiPrefix()+"api/portal/web/index";
            common.doGet(url,function(data){
                self.bannerList = data.bannerList;
                self.activeList = data.huodongList;
                self.youjiList = data.youjiList;
                self.fangchanList = data.fangchanList;
                self.tourList = data.tourList;
                self.hotelList = data.hotelList;
				setTimeout(function(){
					if($(".swiper_banner").length > 0){
				        var swiper = new Swiper('.swiper_banner', {
				            centeredSlides: true,
				            autoplay: {
				                delay: 5000,
				                disableOnInteraction: false,
				            },
				            pagination: {
				                el: '.swiper-pagination',
				                clickable: true,
				            },
				            loop: true,
				        });
				    }
					$(".common_code_pop>li").hover(function(){
				        $(this).find(".wx_con").animate({top:"0px"},300);
				    },function(){
				        $(this).find(".wx_con").animate({top:-$(this).find(".pt").height()+"px"},300);
				    });
				    
				    qrcode(".common_code_pop .code_pt");
				},100);
            });
        },
        getZhutu: function (picArr) {
            picArr = picArr.replace('[', '').replace(']', '');
            return picArr.split(",")[0].replace(/^\"|\"$/g,'');
        }
    },
    data: function() {
        return {
            sftpPathPrefix: common.getFtpPrefix(),
            weixinPrefix: common.getWeixinPrefix(),
            bannerList: [],
            activeList: [],
            youjiList: [],
            fangchanList: [],
            tourList: [],
            hotelList: []
        };
    }
};
</script>